<template>
  <div id="app" style="padding-top: 2rem">
    <textarea type="text" v-model="txt" :placeholder="placeholder" style="width: 18rem;height: 6rem"></textarea>
    <button @click="send_msg">匿名留言</button>
    <ul>
      <li v-for="(msg, i) in msg_arr" @click="delete_msg(i)">{{ msg }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "LeaveMessages",

  data() {
    return {
      txt: '',
      msg_arr: [],
      placeholder: '请输入你想说的话！意见、牢骚、评论...',
    };
  },
  created() {
    //从数据库读取message
    this.getData(1);
  },
  methods: {
    send_msg: function () {
      // this.txt
      // this.msg_arr
      if (this.txt) {
        this.msg_arr.push(this.txt);

        //将消息存入数据库
        this.$http.post('feedback/save',
          {
            id: '0',
            name: '',
            phone: '',
            message:this.txt,
          },{emulateJSON: true}
        ).catch(function (error) {
          console.log(error);
        });
        this.txt = '';
      }
    },
    delete_msg: function (index) {
      this.msg_arr.splice(index, 1)
    },
    getData (id) {
      var _this = this
      id = 1;
      // this.$http.get('feedback/getList').then(response => {
      this.$http.get('http://honglitech.cn:8004/feedback/getList').then(response => {
        // console.log("后端返回："+JSON.stringify(response))
        var data = response.data
        if (data.code == 200) {
          var values = new Array()
          for (var i = 0; i < data.data.length; i++) {
            // values[i] = [data.data[i].name, data.data[i].phone, data.data[i].message]
            _this.msg_arr.push(data.data[i].message)
          }

          // _this.config = {
          //   header: ['名字', '联系方式', '留言'],
          //   data: values,
          //   rowNum: 5, //表格行数
          //   headerHeight: 35,
          //   // headerBGC: '#171057', //表头
          //   // oddRowBGC: '#113af5', //奇数行
          //   // evenRowBGC: '#2895b9', //偶数行
          //   index: true,
          //   columnWidth: [50,30,60,500],
          //   waitTime: 500,
          //   align: ['center']
          // }
        } else {
          console.log('失败')
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
